<script>
export default {
  name: "process",
  props: {
    currentIndex: Number,
		totalCount: Number,
  },
}
</script>

<template>
  <view class="component">
    <!--			进度条-->
    <view class="process-bar">
      <view class="process-bar-content" :style="'width: ' + 100 * (currentIndex / (totalCount - 1)) + '%'"></view>
    </view>
    <!--		进度文字-->
    <view class="process-text-container">
      <view class="process-text">{{ `${currentIndex + 1} / ${totalCount}` }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  height: 88rpx;
  .process-bar {
    height: 20rpx;
    background: var(--theme-color-light);

    .process-bar-content {
      height: 100%;
      width: 0;
      background: var(--theme-color);
    }
  }
	.process-text-container {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding: 10rpx 30rpx;
		.process-text {
			font-size: 34rpx;
		}
	}
}
</style>
